<template>
	<view class="container">
		<view class="header">
			<status-bar-height mpMenuButtonBoundingHeight />
			<view class="header-container">
				<image class="header__logo" :src="$u.$assets.logo"></image>
				<view class="header__search">
				    <input 
						class="header__search__input"
						placeholder-class="header__search__input--placeholder"
						:placeholder="$t('home.headerInputPlaceholder') "
					/>
				    <view class="header__search__clk">
						<image class="header__search__clk--icon" :src="$u.$assets.searchIcon"></image>
						<text class="header__search__clk--text">{{ $t('home.headerSearchBtnText') }}</text>
				    </view>
				</view>
			</view>
		</view>
		
		<status-bar-height mpMenuButtonBoundingHeight />
		<mescroll-body
			class="mescroll-body"
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback" 
			:down="downOption" 
			:up="upOption"
			top="0"
		>
			<view class="swiper">
				<u-swiper
					height="351rpx"
					:list="swiperList"
					:loading="bannerLoading"
					:indicatorStyle="swiperIndicatorStyle"
					indicator
					indicatorMode="dot"
					indicatorActiveColor="#FFFFFF"
					indicatorInactiveColor="rgba(204, 204, 204, 1)"
				></u-swiper>
			</view>
			
			<view class="card">
				<view class="card-title card-title-1">
					<text>{{ $t('home.menuTitle') }}</text>
				</view>
				
				<gy-home-menu></gy-home-menu>
				
			</view>
			
            
            <view class="card">
            	<view class="card-title card-title-1">
            		<text>{{ $t('home.languageSwitch') }}</text>
            	</view>
            	<u-switch v-model="languageSwitch" @change="languageSwitchChange"></u-switch>
            </view>
            
            <view class="card">
            	<view class="card-title card-title-1">
            		<text>{{ $t('home.setUpVuex') }}</text>
            	</view>
            	<u-button 
                    type="primary" 
                    :text="'user.count + 1：' + $u.vuex.get('user.count')" 
                    @click="() => {
                        $u.vuex.set(
                            'user.count', 
                            $u.vuex.get('user.count') + 1
                        )
                    }"
                ></u-button>
            </view>
            
            <view class="card">
            	<view class="card-title card-title-1">
            		<text>{{ $t('home.routeTitle') }}</text>
            	</view>
            	<u--text mode="link" :text=" $t('home.routeText') " href="https://www.uviewui.com/js/route.html" ></u--text>
            </view>
            
		 </mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    const app = getApp
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				swiperList: [
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                ],
				bannerLoading: false,
				
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: { 
					
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多了'
				},
				dataList: [],
                languageSwitch: false
			} 
		},

		onLoad() {
            uni.setNavigationBarTitle({
            	title: "uniapp模板"
            })
		},
		computed: {
			title: () => uni.$t('title'),
			swiperIndicatorStyle(){
				return {
					bottom: '14rpx'
				}
			}
		},
		methods: {
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			
			// 下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
                
                setTimeout(() => {
                    this.mescroll.endSuccess(10, false)
                }, 2000)
			},
            // 语言切换
            languageSwitchChange(){
                uni.$emit('switchLanguage', this.$i18n.locale === 'zh-Hans' ? 'en' : 'zh-Hans')
                uni.$emit('setMescrollGlobalOption', { i18n: { type: this.mescroll.i18n.type === 'zh' ? 'en' : 'zh' }})
            }
		}
	} 
</script>

<style lang="scss">
	
page{
	background-color: #FFFFFF;
}

.container {
	@include flex-center;
	
	.header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: rgba(255, 255, 255, 1);
		
		.header-container{
			height: 120rpx;
			padding: 0 31rpx 0 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			box-shadow: 0rpx 4rpx 4rpx  rgba(0, 0, 0, 0.25);
		}
		
		&__logo{
			width: 64rpx;
			height: 64rpx;
		}
		
		&__search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			height: 56rpx;
			padding: 0 21rpx;
			margin-left: 28rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: rgba(204, 204, 204, 0.31);
			
			&__input{
				flex: 1;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 28.96rpx;
				color: rgba(0, 0, 0, 0.6);
				text-align: left;
				vertical-align: top;
				
				&--placeholder{
					color: rgba(0, 0, 0, 0.3);
					font-size: 20rpx;
				}
			}
			
			&__clk{
				display: flex;
				align-items: center;
				height: 40rpx;
				border-left: 1px solid rgba(145, 145, 145, 0.43);
				padding-left: 11rpx;
				margin-left: 10rpx;

				&--icon{
					width: 25rpx;
					height: 25rpx;
					margin-right: 6rpx;
				}
				
				&--text{
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 34.75rpx;
					color: rgba(0, 0, 0, 0.6);
					text-align: left;
					vertical-align: top;

				}
			}
		}
	}
	
	.swiper{
		width: 687rpx;
		margin-top: #{ 120rpx + 44rpx }; 
		
		/deep/ .u-swiper-indicator__wrapper__dot{
			width: 41rpx;
			height: 9rpx;
			margin: 0 4rpx;
		}
	}
	
	.card{
		width: 676rpx;
		margin-top: 15rpx;
		
        .card-title{
            margin-bottom: 20rpx;
        }
        
		.card-title>text{
			position: relative;
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 32.93rpx;
			text-align: left;
			vertical-align: top;
			padding-bottom: 3rpx;
			
			&::after{
				position: absolute;
				content: "";
				display: block;
				bottom: 0;
				left: 10rpx;
				right: 10rpx;
				height: 3rpx;
				background: rgba(255, 141, 26, 1);
				z-index: 1;
		
			}
		}
		
		.card-title-1{
			color: rgba(0, 0, 0, 1);
		}
		
		.card-title-2{
			color: rgba(255, 141, 26, 1);
		}
		
	}
	
}

</style>
